import BaseView from "../baseView.js";

export default class StudentListInfo extends BaseView{

    render(){
        //注意不要在inde.html中的id='app'入口写入内容
        //而是应该时mainView页面中的叫 id="showContent"中写入内容
        //$("#showContent").html("<h1>显示学生列表信息</h1>")
        $("#showContent").html(`
        <div style="margin: 30px 10px 0 20px">
        <span class="layui-breadcrumb" style="visibility: visible;">
            <a>学生管理系统/</a>
            <a>学生资料管理/</a>
            <a>显示学生的数据列表</a>
         </span>
        </div>
        <hr/>
        <div>
        <button id='addstudentBtn' style="margin: 10px 0px 15px 15px" class='layui-btn layui-btn-normal'>
        添加<i class="layui-icon layui-icon-add-1"></i>
        </button> 
        <table id="showDatas" lay-filter="showdatas"></table>
        </div> 
       </div>`)
    }
    handle(){
        $("#addLayuijs").html(`
        //绑定工具栏
        <script type="text/html" id="toolDemo">
            <a class="layui-btn layui-btn-xs" lay-event="detail">查询</a>
            <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
        </script>
      
        <script>
        layui.use('table', function(){
          var table = layui.table;
          //
          //test 是 table 原始容器的属性 lay-filter="对应的值"
          table.on('tool(showdatas)', function(obj){
            //obj.data 指的就是一行数据
            var data = obj.data; //一行数据就是一个json对象
            console.log(data)
            //判断你点击了哪个按钮
            //删除
            if(obj.event === 'del'){
              //console.log("删除===")
              //写删除的时候一定要让用户确认是否删除
              layer.confirm('真的删除该数据吗?', function(index){
                // console.log("确定删除")
                obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                layer.close(index);
                //向服务端发送删除指令
                //console.log(data._id)
                console.log(data._id)
                 $.ajax({
                   type:"delete",
                   url:"/api/student/delstudent/"+data._id,
                   dataType:"json",
                   success:(data)=>{
                        if(data.code==1){
                           alert(data.msg);
                           //重新刷新页面
                           window.location.hash="#/main/stundentList"
                        }else{
                          alert(data.msg);
                        }
                   }
                 }) 
              });

            } else if(obj.event === 'edit'){
              //编辑
              //console.log("修改===")
              window.location.hash="#/main/updatestudent/"+data._id
            }else if(obj.event==='detail'){
              //console.log("查看===")
               //跳转到查看详细信息页面
               window.location.hash="#/main/showstudentdetail/"+data._id
              console.log("查看===")
            }
          });
      
        
          //第一个实例
          table.render({
            elem: '#showDatas'
            ,url: '/api/student/shows' //数据接口
            //当后台返回的数据不满足layui的数据格式时，可进行转换
            ,parseData: function(res){
              return {
              "code": res.status, //解析接口状态
              "msg": res.message, //解析提示文本
              "count": res.total, //解析数据长度
              "data": res.datas //解析数据列表
              }
            }
            ,cols: [[ //表头
              {field: '_id', title: '编号', fixed: 'left'}
              ,{field: 'name', title: '用户名',}
              ,{field: 'gender', title: '性别'}
              ,{field: 'age', title: '年龄',} 
              ,{field: 'address', title: '家庭住址',}
              ,{field: 'score', title: '分数'}
              //绑定工具栏
              ,{fixed: 'right', title:'操作', toolbar: '#toolDemo'}
            ]]
          });
          
        });
        </script>
        `)
      
        //给添加按钮绑事件
        $("#addstudentBtn").click(()=>{
            window.location.hash="#/main/addstudent";
        })

    }


}    